<template>
  <div>
    <template>
      <el-table
        class="list-table"
        v-loading="listLoading"
        :data="listData"
        stripe
        size="small"
        fit
        highlight-current-row
        :default-expand-all="isExpand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
        style="width: 100%;">
        <!--<el-table-column type="selection" align="center" width="55"/>-->
        <!--<el-table-column fixed="left" :show-overflow-tooltip="true" prop="employeeId" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">编号</p>
          </template>
        </el-table-column>-->
        <el-table-column fixed="left" :show-overflow-tooltip="true" prop="salaryDate">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">发放月份</p>
          </template>
          <template slot-scope="scope">
            <span>{{scope.row.salaryDate | formatTimestamp | formatDate('yyyy-MM') }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="left" :show-overflow-tooltip="true" prop="employeeName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">姓名</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="deptName" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">部门名称</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="status">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">员工状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.employeeStatus | employeeStatus" size="small">{{scope.row.employeeStatus |
              employeeStatus('text')}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="postName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位/职务</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="onboardingDate" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">入职日期</p>
          </template>
          <template slot-scope="scope">
            <span>{{scope.row.onboardingDate | formatTimestamp | formatDate('yyyy-MM-dd')}}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="leaveDate" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">离职日期</p>
          </template>
          <template slot-scope="scope">
            <span>
              {{scope.row.leaveDate | formatTimestamp | formatDate('yyyy-MM-dd') | formatDefaultDate}}
            </span>
          </template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="true" prop="salaryType">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">发放类型</p>
          </template>
          <template slot-scope="scope">

            {{scope.row.salaryType == 1 ? '工资发放' : '工资补发' }}

          </template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="true" prop="baseSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">基础工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.baseSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="assessmentSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">绩效奖金(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.assessmentSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="postSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.postSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="marketingSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">营销奖金（行方）(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.marketingSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="subsidySalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补贴工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.subsidySalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="overtimeSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">加班工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.overtimeSalary }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="reissueSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补发项</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.reissueSalary }}</span>
          </template>
        </el-table-column>-->
        <el-table-column :show-overflow-tooltip="true" prop="attendanceDeduction" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">考勤扣款(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.attendanceDeduction }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="businessDays" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">出差天数</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.businessDays }}</span>
          </template>
        </el-table-column>-->
        <el-table-column :show-overflow-tooltip="true" prop="allowanceSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">津贴(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.allowanceSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="teacherMealSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">讲师餐补(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.teacherMealSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="labourServiceSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">劳务工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.labourServiceSalary }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="personnelManagementDept" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">人事管理部</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.personnelManagementDept }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column :show-overflow-tooltip="true" prop="marketInnovationDept" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">市场创新部</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.marketInnovationDept }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column :show-overflow-tooltip="true" prop="officialWebsite" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">官网</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.officialWebsite }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column :show-overflow-tooltip="true" prop="substituteDeduction" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">代发代付</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.substituteDeduction }}</span>
          </template>
        </el-table-column>-->
        <el-table-column :show-overflow-tooltip="true" prop="otherDeduction" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">其他扣款(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.otherDeduction }}</span>
          </template>
        </el-table-column>
        
        <el-table-column :show-overflow-tooltip="true" prop="personalSocialSecurityTotalCost" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保总扣除(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.personalSocialSecurityTotalCost }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="personalSocialSecurityAdjust" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保总扣除调整(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.personalSocialSecurityAdjust }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="enterpriseSocialSecurityTotalCost" width="170">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">企业社保总扣除(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.enterpriseSocialSecurityTotalCost }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="securityCharge" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">服务费(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.securityCharge }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="beforeTaxSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">税前工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.beforeTaxSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="personalIncomeTax" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个税(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.personalIncomeTax }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="labourServiceTax" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">劳务税(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.labourServiceTax }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="realSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">实发工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.realSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="remark" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">备注</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="bankNo" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">银行卡号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.bankNo }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="openingBank" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">开户行</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.openingBank }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="certNo" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">身份证号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.certNo }}</span>
          </template>
        </el-table-column>
        <el-table-column  prop="phone" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">电话号码</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        
        <el-table-column fixed="right" :show-overflow-tooltip="true" prop="payableSalary" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">应付工资(元)</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.payableSalary }}</span>
          </template>
        </el-table-column>
        
      </el-table>
      
      
    </template>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="searchKey.pageNum" :page-sizes="[10, 20, 50, 100, 200]"
                     :page-size="searchKey.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { debounce } from 'lodash'
  import filters from '@/filters/filters'
  import tagFilter from '@/filters/tagFilter'

  export default {
    name: 'SalarylistTable',
    mixins: [tagFilter, filters],
    components: {},
    data() {
      return {
        searchKey: {},
        isExpand: true,
        tableSelectedData: [], // 选中的表数据
        listData: [] // 列表数据
      }
    },
    props: {
      data: { // 列表数据
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      totalCount: {
        type: [String, Number],
        required: true,
        default: 0
      },
      listLoading: {
        type: [Boolean],
        required: true,
        default: false
      },
      actionWith: {
        type: [String, Number],
        default: 120
      }
    },
    computed: {},
    methods: {
      handleSizeChange(val) { // 分页改变每页条数
        this.searchKey.pageSize = val
        this.$emit('on-init', this.searchKey)
      },
      handleCurrentChange(val) { // 分页切换分页
        this.searchKey.pageNum = val
        this.$emit('on-init', this.searchKey)
      },
      handleAdd(data = null) { // 新增按钮操作
        this.$emit('on-edit', data)
      },
      handleUpdate(data = null) { // 修改按钮操作
        let { tableSelectedData } = this
        this.$emit('on-edit', data || tableSelectedData[0])
      },
      handleSelectionChange(selection) { // 多选框选中数据
        this.tableSelectedData = selection
      },
      handleExpand: debounce(function() { // 查询，防抖
        this.isExpand = !this.isExpand
        this.$emit('on-init', this.searchKey)
      }, 300)
    },
    watch: {
      data: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.listData)) {
            this.listData = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      },
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .list-table {
    .el-button--mini {
      padding: 7px 15px;
      width: 45px;
      color: #fff;
    }

    & /deep/ .el-table__header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
</style>
